<template>
	<div>
		<NavigationBar
			ref="navigationBar"
			title-text=""
			clear-height
			background-color="transparent"
			:is-show-button="false"
		/>
		<Message ref="message" />
	    <Loading ref="loading" fullscreen /> 
		<div
			class="cover-container w-full h-280rpx absolute top-0 left-0"
			:style="{ height: `calc(${navigationHeight}px + 340rpx)` }"
		>
			<image
				class="w-full h-full"
				src="/static/images/my-bg.jpg"
				mode="aspectFill"
			/>
		</div>
		<div
			class="my-page-container w-full min-h-screen pr-30rpx pb-100rpx pl-30rpx"
			:style="{ paddingTop: `${navigationHeight}px` }"
		>
			<!-- 用户信息容器 -->
			<div
				v-if="userInfo"
				class="user-info-container w-full h-240rpx flex-column"
			>
				<div class="user-info_row w-full flex flex-nowrap items-center">
					<div
						class="avatar w-120rpx h-120rpx overflow-hidden flex-shrink-0"
						@click="handleGotoPage('/pages/my-user-profile/my-user-profile')"
					>
						<image class="wh-full" :src="userInfo.avgPath" mode="aspectFill" />
					</div>
					<div
						class="username flex-column justify-center ml-30rpx overflow-hidden"
						@click="handleGotoPage('/pages/my-user-profile/my-user-profile')"
					>
						<div class="flex items-center mb-14rpx">
							<text class="mr-10rpx text-36rpx font-bold">
								{{ userInfo.username || '' }}
							</text>
							<!-- <UserMedal
								v-for="medal in userInfo.medals"
								:key="medal.name"
								:content="medal.name"
								:custom-style="medal.style"
								size="lg"
							/> -->
						</div>
						<div class="user-page-btn flex items-center text-24rpx">
							<text>个人主页</text>
							<i class="fas fa-angle-right ml-10rpx" />
						</div>
					</div>
				</div>
			</div>
			<!-- 未登录时显示的登录按钮区域 -->
			<div
				v-else
				class="user-login-container w-full h-240rpx px-30rpx flex-column"
			>
				<div class="w-full flex-column">
					<text class="mb-12rpx text-40rpx font-bold"
						>Hi~ 欢迎来到医疗服务小程序</text
					>
					<text class="text-26rpx text-hex-555">登录后体验更多功能</text>
				</div>
				<div
					class="login-btn my-30rpx px-50rpx py-20rpx bg-primary text-white text-32rpx font-bold"
					@click="getMyInfo"
				>
					登录 / 注册
				</div>
			</div>

			<!-- 竖排按钮容器 -->
			<div
				class="vertical-btn-container w-full my-30rpx px-40rpx py-20rpx bg-white"
			>
				<div
					class="btn_row w-full min-h-100rpx flex items-center flex-nowrap text-30rpx"
					@click="handleGotoPage('/pages/my-registered/my-registered')"
				>
					<div
						class="btn_title flex flex-shrink-0 items-center text-28rpx text-hex-555"
					>
						<i class="far fa-star" />
						<text>挂号预约</text>
					</div>
					<div class="flex ml-auto">
						<i class="fas fa-angle-right text-30rpx text-hex-aaa" />
					</div>
				</div>
				<div
					class="btn_row w-full min-h-100rpx flex items-center flex-nowrap text-30rpx"
					@click="handleGotoPage('/pages/my-booking/my-booking')"
				>
					<div
						class="btn_title flex flex-shrink-0 items-center text-28rpx text-hex-555"
					>
						<i class="far fa-address-book" />
						<text>上门服务</text>
					</div>
					<div class="flex ml-auto">
						<i class="fas fa-angle-right text-30rpx text-hex-aaa" />
					</div>
				</div>
				<div
					class="btn_row w-full min-h-100rpx flex items-center flex-nowrap text-30rpx"
					@click="
						handleGotoPage('/pages/my-user-profile/my-user-profile')
					"
				>
					<div
						class="btn_title flex flex-shrink-0 items-center text-28rpx text-hex-555"
					>
						<i class="far fa-address-card" />
						<text>我的资料</text>
					</div>
					<div class="flex ml-auto">
						<i class="fas fa-angle-right text-30rpx text-hex-aaa" />
					</div>
				</div>
				<div
					class="btn_row w-full min-h-100rpx flex items-center flex-nowrap text-30rpx"
					@click="handleGotoPage('/pages/address-book/address-book')"
				>
					<div
						class="btn_title flex flex-shrink-0 items-center text-28rpx text-hex-555"
					>
						<i class="far fa-map" />
						<text>我的地址</text>
					</div>
					<div class="flex ml-auto">
						<i class="fas fa-angle-right text-30rpx text-hex-aaa" />
					</div>
				</div>
				<button
					class="btn_row w-full min-h-100rpx flex items-center flex-nowrap text-30rpx"
					open-type="contact"
				>
					<view
						class="btn_title flex flex-shrink-0 items-center text-28rpx text-hex-555"
					>
						<i class="far fa-envelope" />
						<text>联系客服</text>
					</view>
					<view class="flex ml-auto">
						<i class="fas fa-angle-right text-30rpx text-hex-aaa" />
					</view>
				</button>
				<div
					class="btn_row w-full min-h-100rpx flex items-center flex-nowrap text-30rpx"
					@click="handleGotoPage('/pages/feedback/feedback')"
				>
					<div
						class="btn_title flex flex-shrink-0 items-center text-28rpx text-hex-555"
					>
						<i class="far fa-face-smile"></i>
						<text>反馈建议</text>
					</div>
					<div class="flex ml-auto">
						<i class="fas fa-angle-right text-30rpx text-hex-aaa" />
					</div>
				</div>
			</div>
			<div
				class="version-info-container w-full mt-30rpx flex-column flex-center text-26rpx text-hex-aaa"
			>
				<span @click="() => devMode && handleGotoPage('/pages/dev/dev')">
					© 医疗服务小程序 2023 - 2024
				</span>
				<!-- <span>{{ version }}</span>-->
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Message from '@/components/message/src/message.vue';
import type { MessageMethod } from '@/components/message';
import Loading from '@/components/loading/src/loading.vue';
import type { LoadingMethod } from '@/components/loading';
import NavigationBar from '@/components/navigation-bar/src/navigation-bar.vue';
import type { NavigationBarMethod } from '@/components/navigation-bar';
import { useSystemStore, useUserStore } from '@/store';
import { formatOssUrl } from '@/common/filters';
import { gotoPage } from '@/common/utils';
import { userApi } from '@/service/api';

const message = ref<InstanceType<typeof Message> & MessageMethod>(null);
const loading = ref<InstanceType<typeof Loading> & LoadingMethod>(null);
const navigationBar =
	ref<InstanceType<typeof NavigationBar & NavigationBarMethod>>(null);
const { userInfo } = storeToRefs(useUserStore());
const { navigationHeight } = useSystemStore();
console.log(userInfo.value);

const userId = computed((): number | null => userInfo.value?.userId ?? null) //我的用户ID
const userDetailInfo = ref<any>({}) //我的用户详细信息

 // 获取我的信息
  const getMyInfo = (): void => {
    if (!userId.value) {
      gotoPage('/pages/login/login')
      return
    }
    const getUserInfoPromise = new Promise<void | string>((resolve, reject) => {
      userApi.getCurrentUserInfo().then(res => {
		console.log(res);
		
        userDetailInfo.value = res.data
        userInfo.value && (userInfo.value.username = res.data?.username ?? '')
        userInfo.value && (userInfo.value.avgPath = res.data?.avgPath ?? '')
        // userInfo.value && (userInfo.value.medals = res.data?.medals ?? [])
        resolve()
      }).catch(err => {
        reject(err)
      })
    })
    Promise.all([getUserInfoPromise]).catch(err => {
      console.error(err)
      message.value.error({
        text: '获取数据失败',
        direction: 'top'
      })
    }).finally(() => {
      loading.value.stopLoading()
      uni.stopPullDownRefresh()
    })
  }
// 跳转页面
const handleGotoPage = useThrottleFn(
	(url: string): void => {
		gotoPage(url);
	},
	1000,
	false,
	true
);
// 未完成的功能
const handleUncompletedFunction = useThrottleFn(
	(): void => {
		message.value.warning({
			text: '暂未开放',
			direction: 'top',
		});
	},
	1000,
	false,
	true
);

const devMode = computed(() => {
	const {
		miniProgram: { envVersion },
	} = uni.getAccountInfoSync();
	return ['develop', 'trial'].includes(envVersion);
});
  // 下拉刷新
  const handlePullDownRefresh = useThrottleFn((): void => getMyInfo(), 1000, false, true)
  onPullDownRefresh(() => handlePullDownRefresh())
  
  onShow(() => {
    if (!!userId.value) {
      //用户已登录
      if (!userDetailInfo.value.hasOwnProperty('userId')) {
        //未获取到用户详细信息（首次加载时显示加载动画）
        nextTick(() => {
          loading.value.startLoading()
        })
      }
      getMyInfo()
    } else {
      uni.removeTabBarBadge({
        index: 3
      })
    }
  })
</script>

<style scoped lang="scss">
@import 'my-page';
</style>
